<template>
	<view>
		<view class="u-page" v-if="contactInfo">
			<view class="top-card">
				<view class="left">
					<textIcon :lwicon="contactInfo.icon" :lwtext="contactInfo.label"></textIcon>
					<!-- <image :src="contactInfo.icon || '@/static/logo.png'" mode="aspectFill"></image> -->
				</view>
				<view class="right">
					<view class="namelen">
						<view class="name">{{contactInfo.label}}</view>
						<view class="sex" v-if="contactInfo.sex">
							<view class="woman" v-show="contactInfo.sex == '女'">
								<u-icon name="woman" color="#fff" ></u-icon>
							</view>
							<view class="man" v-show="contactInfo.sex == '男'">
								<u-icon name="man" color="#fff"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="cell-group">
				<view class="group-title">组织信息</view>
				<u-cell-group>
					<!-- :isLink="true" -->
					<u-cell size="large" title="部门" :value="contactInfo.dept"></u-cell>
					<u-cell size="large" title="职务" :value="contactInfo.post"></u-cell>
					<u-cell size="large" title="电话" :value="contactInfo.mobileNo"></u-cell>
					<u-cell size="large" title="邮箱" :value="contactInfo.mail"></u-cell>
				</u-cell-group>
			</view>
		</view>
	</view>
</template>

<script>
  	import textIcon from '@/components/textIcon/index.vue';
	export default {
		components: {textIcon},
		data() {
			return {
				contactInfo: ''
			}
		},
		onLoad(options) {
			var vm = this;
			var contactInfo = this.$Util.decodeJSON(options.data);
			uni.showLoading();
			vm.getAndLoad('通讯录列表', '/mobile/wx/newApi/getUserInfo.jsp?userId=' + contactInfo.id, function (res) {
				uni.hideLoading();
				contactInfo.dept = vm.$Util.pickValueFromArray(res.data, n => n.col == 'deptId');
				contactInfo.post = vm.$Util.pickValueFromArray(res.data, n => n.col == 'post');
				contactInfo.mobileNo = vm.$Util.pickValueFromArray(res.data, n => n.col == 'mobileNo');
				contactInfo.email = vm.$Util.pickValueFromArray(res.data, n => n.col == 'email');
				vm.contactInfo = contactInfo;
			});
			
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
.top-card {
	background: #fff;
	display: flex;
	padding: 40rpx 20rpx;
	.left {
		/deep/ image {
			width: 112rpx;
			height: 112rpx;
			border-radius: 10rpx;
		}
	}
	.right {
		.namelen {
			margin-left: 40rpx;
			display: flex;
			align-items: baseline;
			line-height: 80rpx;
			.name {
				font-size: 36rpx;
				font-weight: bold;
				margin-right: 30rpx;
			}
			.sex {
				.man {
					background: #2b96ff;
					border-radius: 50%;
					padding: 1px;
					width: 36rpx;
					height: 36rpx;
					@extend .flex-center;
				}
				.woman {
					background: #ff2ba7;
					border-radius: 50%;
					padding: 1px;
					width: 36rpx;
					height: 36rpx;
					@extend .flex-center;
				}
			}
		}
	}
}
.cell-group {
	margin-top: 20rpx;
	background: #fff;
	padding: 20rpx;
	.group-title {
		font-size: 36rpx;
		line-height: 80rpx;
		margin-bottom: 20rpx;
	}
}
</style>
